@import "yoastcom/0-settings/all";
@import "yoastcom/0-tools/mixins";
@import "yoastcom/lists";
@import "yoastcom/headings";
@import "yoastcom/buttons";
@import "yoastcom/promoblock";
@import "icons";

.yoast {
	font-family: "Open Sans",Arial,sans-serif;
	font-size: 1rem;
	line-height: 1.88;
	letter-spacing: 0.01em;
	color: #000;

	$gutter: 32px;

	*,
	*:before,
	*:after {
		box-sizing: border-box;;
	}

	&-hr {
		margin: 0;
		border: 0;
		padding-bottom: 1.88rem;
		position: relative;
	}

	&-list--usp {
		li:before {
			content: "";
			background: url(svg-icon-check($color-green)) no-repeat;
			background-size: contain;
			width: 1em;
			height: 100%;
			background-position: left 0.4em;
		}
	}

	&-button--purple {
		background-color: $color-purple;
	}

	&-button-go-to {
		&:after {
			content: " \00BB";
			position: static;
			top: auto;
			right: auto;
			width: auto;
			height: auto;
			border: none;
		}
	}

	&-button {
		&--extension {
			color: $color-white;
			text-transform: uppercase;
			padding-left: 0.8em;
			padding-right: 0.8em;

			& + &-activated, & + &-not-activated {
				margin-left: 0;
			}

			&-installed, &-activated, &-not-activated {
				&:hover {
					text-decoration: none;
				}
			}

			&-installed {
				margin-right: 0.2rem;

				&, &:hover {
					background-color: $color_green_medium;
				}
			}

			&-not-activated {
				&, &:hover {
					background-color: $color-error;
				}
			}

			&-activated {
				&, &:hover {
					background-color: $color_green_medium;
				}
			}
		}

		&-upsell {
			width: 100%;
			margin-bottom: 1em;

			@media only screen and (min-width: $page-width-small) {
				width: auto;
				margin-right: 1.36rem;
			}
		}
	}

	&-promo-extensions {
		display: flex;
		flex-wrap: wrap;
		margin-left: ( -1 * $gutter ) + 8px;

		> h2 {
			width: 100%;
			margin-left: $gutter;
			margin-bottom: $gutter;
		}
	}

	&-promo-extension {
		// This is already a flex item of the container yoast-promo-extensions.
		// First we style it as flex item to include fixes for IE11.
		flex: 0 1 340px;
		max-width: 340px;
		// Then we style it as flex container to layout its content in a vertical flexbox.
		display: flex;
		flex-direction: column;
		background-color: #fff;
		margin-left: $gutter;

		&:first-child {
			margin-left: 0;
		}

		img {
			float: right;
			width: 100px;
			height: 100px;
			margin-bottom: 0.8rem;

			@media screen and (max-width: 900px) {
				display: none;
			}
		}

		.yoast {
			&-button-container {
				// Push the button container to the bottom leveraging flexbox auto margins.
				margin-top: auto;

				div.yoast-button--extension {
					cursor: default;
				}
			}
		}

		.yoast-button {
			width: 100%;
			max-height: none;
			font-size: 0.9rem;

			&--installed {
				color: $color-white;
			}

			&--extension {
				font-size: 0.9rem;
				text-align: center;
				margin-top: 0;

				&-installed {
					margin: 0 2% 0 0;
					width: 48%;
				}

				&-activated, &-not-activated {
					margin-left: 0;
					margin-right: 0;
					width: 48%;
				}
			}
		}

		.yoast-button-upsell {
			width: 100%;
		}

		h3 {
			color: $scheme-academy-secondary;
		}

		@media screen and (max-width: 900px) {
			max-width: none;
			width: 100%;
		}
	}

	&-seo {
		&-premium-extension {
			@include clearfix;
			margin: 2em 0.5em 1.5em;
		}

		&-premium-benefits {
			&__title {
				font-weight: 600;
			}

			&__description:before {
				content: "– "
			}
		}
	}

	&-link--license,
	&-link--more-info {
		color: $color-pink-dark;
		font-weight: 600;
	}

	&-link--license {

		margin:  1em 0 0 0;

		.yoast-promo-extension & {
			display: block;
			margin:  1em 0 0 0;
		}

		&:after {
			content: " \00BB";
		}
	}


	&-link--more-info {
		background: url(svg-icon-info($color-pink-dark));
		padding-left: calc( 1em + 5px );
		background-size: 1em;
		background-repeat: no-repeat;
		background-position: left center;

		&:after {
			content: " \00BB";
		}

		.yoast-promo-extension & {
			display: block;
			margin: 0;
			background-position: left center;
		}
	}

	&-heading-highlight {
		color: $scheme-academy-secondary;
		font-weight: 600;
	}

	&-money-back-guarantee {
		font-style: italic;
		font-size: 1.1em;
	}

	&-license-status-active {
		padding: 3px 6px;
		color: $color_white;
		background: $color_green_medium;
	}

	&-license-status-inactive {
		padding: 3px 6px;
		color: $color_white;
		background: $color_error;
	}
}
